<template>
  <div class="home-wrap">
    <div class="top">
      <img :src="imgPath+'home1.png'" alt="">
      <span @click="hadleNeng">查看详情</span>
    </div>
    <img :src="imgPath+'home2.png'" alt="">
    <img :src="imgPath+'home3.png'" alt="">
    <div class="rights">
      <!-- <div class="separate">
        <div class="content">
          <span>召唤周边司机</span>
          <span>给周边司机精准推送优惠券，吸引周边客户</span>
          <span>
            实时把握商机，不错失每个潜在客户，能+智能化监控，获悉用户流量动态，精准推送给油站商家。油站周边司机数据实时动态更新,
            快速高效精准触达高意向顾客。
          </span>
          <span @click="handleRoute('/marketShop/ambientShow')">查看详情</span>
        </div>
        <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/home/ambient.png" alt="">
      </div> -->
      <!-- <div class="separate">
        <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/home/gone.png" alt="">
        <div class="content">
          <span>召回流失司机</span>
          <span>给流失客户发送优惠券，激活流失客户</span>
          <span>
            促活沉默顾客，将流量变成留量
            能+对用户进行多维度，精细化分类。召回长时间未再次消费的顾客，通过智能后台推送最
            新活动，对沉默顾客进行促活召回。
          </span>
          <span @click="handleRoute('/marketShop/goneShow')">查看详情</span>
        </div>
      </div> -->
      <!-- <div class="separate">
        <div class="content">
          <span>提高油站排名</span>
          <span>提高油站展示排名，高曝光高销量</span>
          <span>
            能+精准流量分配规则，享有油站展示优先权，更多的流量转化为更多的销售额。
            商家可自选时段，设置油站在团油APP列表展示前三位，第一时间吸引周边需要加油的顾客，提高顾客选择几率。
          </span>
          <span @click="handleRoute('/marketShop/gasSortShow')">查看详情</span>
        </div>
        <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/home/gasSort.png" alt="">
      </div> -->
      <!-- <div class="separate">
        <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/home/coupon.png" alt="">
        <div class="content">
          <span>店铺领券</span>
          <span>油站拥有配置店铺券自主权</span>
          <span>
            在油站列表展示对应的优惠券，用户可以进入油站详情，领券加油。
            商家拥有该权益后，可根据自己油站的情况配置优惠券，配置成功后，在团油App页面显示【领券】标签。
            用户进入油站店铺，进行领券消费。
          </span>
          <span @click="handleRoute('/marketShop/couponShow')">查看详情</span>
        </div>
      </div> -->
      <div class="separate" v-for="(item,index) in descHelper" :key="index">
        <img v-if="item.isImgLeft" :src="imgPath+item.img" alt="">
        <div class="content">
          <span>{{item.title}}</span>
          <span>{{item.subTitle}}</span>
          <span>{{item.content}}</span>
          <span @click="handleRoute(item.route,item.query)">查看详情</span>
        </div>
        <img v-if="!item.isImgLeft" :src="imgPath+item.img" alt="">
      </div>
    </div>
    <img :src="imgPath+'home4.png'" alt="">
    <img :src="imgPath+'home5.png'" alt="">
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgPath: `${this.$ossUrl}showPage/home/`,
      descHelper:[
        {
          title:'召唤周边司机',
          subTitle:'给周边司机精准推送优惠券，吸引周边客户',
          content:`实时把握商机，不错失每个潜在客户，能+智能化监控，获悉用户流量动态，精准推送给油站商家。油站周边司机数据实时动态更新,
                   快速高效精准触达高意向顾客。`,
          img:'ambient.png',
          isImgLeft: false,
          route:'/marketShop/ambientShow',
          query:''
        },
        {
          title:'召回流失司机',
          subTitle:'给流失客户发送优惠券，激活流失客户',
          content: `促活沉默顾客，将流量变成留量
                    能+对用户进行多维度，精细化分类。召回长时间未再次消费的顾客，通过智能后台推送最
                    新活动，对沉默顾客进行促活召回。`,
          img:'gone.png',
          isImgLeft: true,
          route:'/marketShop/goneShow',
          query:''
        },
        {
          title:'提高油站排名',
          subTitle:'提高油站展示排名，高曝光高销量',
          content:`能+精准流量分配规则，享有油站展示优先权，更多的流量转化为更多的销售额。
                   商家可自选时段，设置油站在团油APP列表展示前三位，第一时间吸引周边需要加油的顾客，提高顾客选择几率。`,
          img:'gasSort.png',
          isImgLeft: false,
          route:'/marketShop/gasSortShow',
          query:''
        },
        {
          title:'店铺领券',
          subTitle:'油站拥有配置店铺券自主权',
          content:`在油站列表展示对应的优惠券，用户可以进入油站详情，领券加油。
                   商家拥有该权益后，可根据自己油站的情况配置优惠券，配置成功后，在团油App页面显示【领券】标签。
                   用户进入油站店铺，进行领券消费。`,
          img:'coupon.png',
          isImgLeft: true,
          route:'/marketShop/couponShow',
          query:''
        },
        {
          title:'会员关怀',
          subTitle:'维系客户关系，增强客户粘性',
          content:`能+通过支付即会员的方式沉淀会员信息，商家在重大节日、店庆日、生日等活动中进行会员关怀，比如给油站会员自动发送优惠券，提升客户好感度，提高复购率和忠诚度，延长客户生命周期....
同时通过各种关怀方式，强化品牌认知度，有利于口碑传播产生裂变效果，实现客户增长。`,
          img:'home-case-care.png',
          isImgLeft: false,
          route:'/marketShop/helperShow',
          query:'care'
        },
        {
          title:'站长喊话',
          subTitle:'个性化广播优惠实况，吸引更多客源',
          content:`能+突出展示油站多样化优惠活动，利用视觉与听觉的通感，丰富油站店铺内容，解决营销内容单一的痛点。商家自定义站长喊话内容，比如消费赠送洗车服务、送水等，增加油站卖点。通过能链团油APP....
                   为客户带来更加切实的优惠体验，同时为油站吸引更多客源。`,
          img:'home-case-shouts.png',
          isImgLeft: true,
          route:'/marketShop/helperShow',
          query:'shouts'
        }
      ]
    }
  },
  methods:{
    handleRoute (item, page) {
      if(page){
        this.$router.push({ path: item, query:{page}}) 
      }else{
        this.$router.push({ path: item })
      }
    },
    hadleNeng () {
      this.$router.push({ path: '/marketShop/shopCenter' }) 
    }
  }
}
</script>
<style lang="less" scoped>
.home-wrap{
  width: 100%;
  padding: 10px 0;
  background: #fff;
  .top{
    position: relative;
    >img{
      width: 100%;
    }
    >span{
      position: absolute;
      top: 45%;
      left: 20%;
      width: 240px;
      height: 50px;
      margin-top: 10px;
      background: #FF0000;
      color: #fff;
      font-weight: 800;
      text-align: center;
      line-height: 50px;
      border: 1px solid #ccc;
      border-radius: 20px;
      cursor: pointer;
    }
  }
  >img{
    display: block;
    width: 100%;
  }
  .rights{
    width:100%;
    .separate{
      width: 100%;
      padding: 30px 180px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      >img{
        display: block;
        width: 401px;
        height: 300px;
      }
      .content{
        width: 421px;
        height: 300px;
        // border:1px solid #0f0;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        >span:nth-child(1){
          font-size: 24px;
          font-weight: bold;
          color: #221d59;
        }
        >span:nth-child(2){
          font-size: 20px;
          color: #221d59;
        }
        >span:nth-child(3){
          font-size: 16px;
          color: #000;
        }
        >span:nth-child(4){
          width: 130px;
          height: 30px;
          margin-top: 10px;
          background: #FF0000;
          color: #fff;
          text-align: center;
          line-height: 30px;
          border: 1px solid #ccc;
          border-radius: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>